<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>淘宝网</title>
    <link rel="stylesheet" href="swiper-lib/swiper-bundle.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            outline: 0;
            -webkit-tap-highlight-color: transparent;
        }

        body {
            height: 100%;
            background-color: #f4f4f4;
        }

        .header {
            display: flex;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 99;
            background-color: #f4f4f4;
            height: 0.49rem;
        }

        .header .h_Taobao {
            margin-top: 0.14rem;
            margin-left: 0.15rem;
        }

        .header .h_Taobao img {
            width: 0.555rem;
            height: 0.21rem;
        }

        .header .h_Search {
            display: flex;
            width: 2.355rem;
            height: 0.35rem;
            margin-top: 0.07rem;
            margin-left: 0.15rem;
            border: 0.015rem solid #ff5000;
            border-radius: 0.5rem;
            background-color: #fff;
            align-items: center;
            position: relative;

        }

        .header .h_Search .word {
            margin: 0.1rem 0 0.1rem 0.15rem;
            max-width: 1.7rem;
            overflow: hidden;
            color: #666666;
            font-size: 0.14rem;
            /* 不允许文字折行 */
            white-space: nowrap;
            /* 溢出自动加省略号 */
            text-overflow: ellipsis;
            /* 溢出隐藏 */
            overflow: hidden;

        }

        .header .h_Search .search {
            position: absolute;
            right: 0;
            width: 0.64rem;
            height: 0.32rem;
            border: 0.01rem solid #fff;
            text-align: center;
            line-height: 0.3rem;
            font-size: 0.14rem;
            color: #fff;
            border-radius: 0.16rem;
            background: -webkit-linear-gradient(left, #FF8D0E, #FF5000);
            background: linear-gradient(to right, #FF8D0E, #FF5000);
        }

        .header .h_Sign_in {
            margin: 0.07rem 0 0 0.13rem;
        }

        .header .h_Sign_in img {
            width: 0.333rem;
            height: 0.333rem;
        }

        .bottom {
            display: flex;
            position: fixed;
            bottom: 0;
            left: 0;
            z-index: 99;
            width: 100%;
            height: 0.46rem;
            background-color: #fff;
            justify-content: space-around;
            align-items: center; 
        }

        .bottom .grld {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
        }

        #taobao {
            margin: 0.04rem 0;
            width: 0.36rem;
            height: 0.36rem;
            background-image: -webkit-linear-gradient(left, #FF8002 0%, #FF5900 100%);
            background-image: linear-gradient(90deg, #FF8002 0%, #FF5900 100%);
            border-radius: 50%;
            position: relative;
        }

        .bottom .grld b::after {
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 0.36rem;
            height: 0.36rem;
            background: url(https://img.alicdn.com/imgextra/i1/O1CN01oAxBQ81qF1EZtn4Rq_!!6000000005465-2-tps-108-108.png) no-repeat;
            background-size: 0.36rem 0.36rem;
        }

        .bottom .grld img {
            width: 0.2rem;
            height:0.2rem;
        }

        .bottom .grld p {
            font-size: 12px;
            -webkit-transform: scale(0.83333333);
            transform: scale(0.83333333);
            text-align: center;
            color: #666666;
            line-height: 0.1rem;
            margin: 0.02rem 0 0;
        }

        .banner-zone {
            height: 1.46rem;
            width: 3.57rem;
            background-color: #fff;
            margin: 0 auto;
            margin-top: 0.5rem;
            margin-left: 0.09rem;
            padding: 0 0.03rem;
            border-radius: 0.12rem;
        }

        .banner-zone .swiper-slide {
            width: 0.61rem;
            height: 1.46rem;
            margin-right: 0.115rem;
            display: flex;
            flex-direction: column;
        }

        .banner-zone .swiper-slide .grid {
            display: flex;
            flex-direction: column;
            align-items: center;
        }


        .banner-zone .swiper-slide .grid img {
            display: block;
            width: 0.61rem;
            height: 0.48rem;
        }

        .banner-zone .swiper-slide .grid p {
            margin-top: 0.05rem;
            line-height: 0.13rem;
            font-size: 0.13rem;
            color: #666666;
            white-space: nowrap;
        }

        .banner-zone .swiper-scrollbar {
            height: 0.03rem;
            width: 0.24rem;
            left: 50%;
            bottom: 0.05rem;
            margin-left: -0.12rem;
            background: #D6D6D6;
            border-radius: 0.04rem;
        }

        .banner-zone .swiper-scrollbar-drag {
            background-color: #FF6D2A;
        }

        .gongge {
            width: 3.57rem;
            display: flex;
            flex-wrap: wrap;
            margin: 0 auto;
            margin-top: 0.06rem;
            position: relative;
            border-radius: 0.12rem;
            overflow: hidden;
            background: url(https://gw.alicdn.com/imgextra/i4/O1CN01GRrTAV1C7c9I5ykhS_!!6000000000034-2-tps-714-368.png_q90.jpg_.webp);
            background-size: 100% 100%;
            background-color: #fff;
        }

        .gongge .grid {
            position: relative;
            height: 0.92rem;
            width: 1.785rem;
            display: flex;
            justify-content: space-around;
            align-items: flex-end;

        }

        .gongge .grid .gongge_hd {
            position: absolute;
            display: flex;
            top: 0.025rem;
            left: 0;
        }

        .gongge .grid .gongge_hd h5 {
            padding-left: 0.06rem;
            font-size: 0.15rem;
            color: #111;
        }

        .gongge .grid .gongge_hd p {
            height: 0.14rem;
            line-height: 0.14rem;
            margin-left: 0.03rem;
            margin-top: 0.04rem;
            padding: 0 0.03rem;
            font-size: 11px;
            color: rgb(255, 255, 255);
            border-radius: 0.02rem;

        }

        .gongge .grid .gongge_hd p.g1 {
            background-color: rgb(255, 66, 0);
        }

        .gongge .grid .gongge_hd p.g2 {
            background-color: rgb(255, 66, 0);
        }

        .gongge .grid .gongge_hd p.g3 {
            background-color: rgb(0, 144, 234);
        }

        .gongge .grid .gongge_hd p.g4 {
            background-color: rgb(255, 151, 17);
        }

        .gongge .grid .gongge_left {
            margin-bottom: 0.055rem;
            margin-left: 0.055rem;
        }

        .gongge .grid .gongge_right {
            margin-bottom: 0.055rem;
            margin-right: -0.02rem;
        }

        .gongge .grid .gongge_left img {
            display: block;
            width: 0.63rem;
            height: 0.63rem;
        }

        .gongge .grid .gongge_right img {
            display: block;
            width: 0.8rem;
            height: 0.8rem;
        }

        .gongge .line1 {
            width: 3.45rem;
            height: 0.005rem;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -1.725rem;
            margin-top: -0.0025rem;
            background-color: #eee;
        }

        .gongge .line2 {
            width: 0.005rem;
            height: 1.72rem;
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -0.0025rem;
            margin-top: -0.86rem;
            background-color: #eee;
        }

        .waterfall {
            display: flex;
            width: 3.57rem;
            margin: 0 auto;
            margin-top: 0.1rem;
        }

        .waterfall .waterfall_left {
            flex: 1;
            height: 22rem;
        }

        .waterfall .waterfall_right {
            flex: 1;
            height: 22rem;
        }

        .waterfall .swiper_wrap {
            margin: 0.1rem 0.05rem;
            height: 2.5rem;
        }

        .waterfall .swiper_wrap .swiper {
            width: 1.71rem;
            height: 2.5rem;
        }

        .waterfall .swiper_wrap .swiper img {
            display: block;
            width: 1.71rem;
            height: 2.5rem;
            border-radius: 0.1rem;
        }

        .waterfall .swiper-slide {
            border-radius: 0.1rem;
        }

        .waterfall .grid {
            width: 1.71rem;
            height: 2.6rem;
            margin: 0.1rem 0.05rem;
            background-color: white;
            border-radius: 0.1rem;
            overflow: hidden;
        }

        .waterfall .grid img {
            width: 1.71rem;
            height: 1.71rem;
        }

        .waterfall .grid .pname {
            margin-top: 0.1rem;
            font-size: 0.13rem;
            padding: 0 0.1rem;
            color: #333333;
            text-overflow: ellipsis;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        .waterfall .grid .info {
            display: flex;
            padding: 0 0.1rem;
            padding-top: 10px;
            padding-bottom: 10px;
            align-items: center
        }

        .waterfall .grid .info .price {
            display: flex;
            color: #FF5000;
            width: 20px;
            font-size: 14px;
        }

        .waterfall .grid .info .price b {
            font-size: 0.12rem;
            font-weight: normal;
        }

        .waterfall .grid .info .price i {
            font-size: 0.14rem;
            font-style: normal;
            margin-left: 0.02rem;
        }

        .waterfall .grid .info .payed {
            margin-left: auto;
            color: #999999;
            font-size: 0.12rem;
        }
    </style>
    <script src="swiper-lib/swiper-bundle.min.js"></script>
</head>

<body>
    <!-- 第一部分 -->
    <div class="header">
        <div class="h_Taobao">
            <img src="	https://gw.alicdn.com/imgextra/i4/O1CN019XWXNq1aAPOVMYSiu_!!6000000003289-2-tps-167-63.png"
                alt="">
        </div>
        <div class="h_Search">
            <span class="word">
                寻找宝贝店铺
            </span>
            <span class="search">
                搜索
            </span>
        </div>
        <div class="h_Sign_in">
            <img src="	https://gw.alicdn.com/imgextra/i4/O1CN01ftum4629SHP6bCqTm_!!6000000008066-2-tps-99-99.png"
                alt="">
        </div>
    </div>

    <!-- 第五部分（底部和顶部写在一起） -->

    <div class="bottom">
        <div class="grld" id="taobao">
            <b></b>
        </div>
        <div class="grld">
            <img src="https://img.alicdn.com/imgextra/i3/O1CN0151qDFg2AN4Vma3SdE_!!6000000008190-2-tps-63-63.png"
                alt="">
            <p>购物车</p>
        </div>
        <div class="grld">
            <img src="https://img.alicdn.com/imgextra/i3/O1CN01nOAkIZ1ou7XqRzXEZ_!!6000000005284-2-tps-63-63.png"
                alt="">
            <p>我的淘宝</p>
        </div>
    </div>

    
    <!-- 第二部分 -->
    <section class="banner-zone">
        <div class="swiper" id="banner-swpier">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <div class="grid">
                        <img src="https://gw.alicdn.com/imgextra/i4/O1CN01XCiY1B1px9ivHkDGm_!!6000000005426-2-tps-183-144.png_q90.jpg"
                            alt="">
                        <p>天猫新品</p>
                    </div>
                    <div class="grid">
                        <img src="https://gw.alicdn.com/imgextra/i1/O1CN018Ilnep1Qt9ryh1Vue_!!6000000002033-2-tps-183-144.png_q90.jpg"
                            alt="">
                        <p>淘宝吃货</p>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="grid">
                        <img src="https://gw.alicdn.com/imgextra/i3/O1CN01FgQFp81spmBXqQMtA_!!6000000005816-2-tps-183-144.png_q90.jpg"
                            alt="">
                        <p>今日爆款</p>
                    </div>
                    <div class="grid">
                        <img src="https://gw.alicdn.com/imgextra/i2/O1CN01gUIFrA1OuPj70aTIW_!!6000000001765-2-tps-183-144.png_q90.jpg"
                            alt="">
                        <p>省钱卡</p>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="grid">
                        <img src="https://gw.alicdn.com/imgextra/i1/O1CN01tsk5OY1q0MUo5PJga_!!6000000005433-2-tps-183-144.png_q90.jpg"
                            alt="">
                        <p>天猫国际</p>
                    </div>
                    <div class="grid">
                        <img src="https://gw.alicdn.com/imgextra/i3/O1CN013WcsZW1jfr4AXnmVl_!!6000000004576-2-tps-183-144.png_q90.jpg"
                            alt="">
                        <p>领淘金币</p>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="grid">
                        <img src="https://gw.alicdn.com/imgextra/i2/O1CN01yK3Cxn1sTnAx1fOjq_!!6000000005768-2-tps-183-144.png_q90.jpg"
                            alt="">
                        <p>飞猪旅行</p>
                    </div>
                    <div class="grid">
                        <img src="https://gw.alicdn.com/imgextra/i2/O1CN01ZOR1cv1yjGFORGh1V_!!6000000006614-2-tps-183-144.png_q90.jpg"
                            alt="">
                        <p>阿里拍卖</p>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="grid">
                        <img src="https://gw.alicdn.com/imgextra/i1/O1CN01iZIGkz1URSOUdRHqS_!!6000000002514-2-tps-183-144.png_q90.jpg"
                            alt="">
                        <p>天猫超市</p>
                    </div>
                    <div class="grid">
                        <img src="https:///gw.alicdn.com/tfs/TB1WgOmesieb18jSZFvXXaI3FXa-183-144.png_q90.jpg?getAvatar=1"
                            alt="">
                        <p>分类</p>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="grid">
                        <img src="https://gw.alicdn.com/imgextra/i4/O1CN01VuRfwH1muSbsJFxoM_!!6000000005014-2-tps-183-144.png_q90.jpg_.webp"
                            alt="">
                        <p>冬奥公益</p>
                    </div>
                    <div class="grid">
                        <img src="https://gw.alicdn.com/imgextra/i1/O1CN01rIm4u11F81KogrKz4_!!6000000000441-2-tps-183-144.png_q90.jpg_.webp"
                            alt="">
                        <p>闲鱼</p>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="grid">
                        <img src="https://gw.alicdn.com/imgextra/i2/O1CN01qrrUAN1wRjrhtfk6Q_!!6000000006305-2-tps-183-144.png_q90.jpg_.webp"
                            alt="">
                        <p>淘票票</p>
                    </div>
                    <div class="grid">
                        <img src="https://gw.alicdn.com/imgextra/i1/O1CN019LbO921EcsOuQqWTM_!!6000000000373-2-tps-183-144.png_q90.jpg_.webp"
                            alt="">
                        <p>土货鲜食</p>
                    </div>
                </div>
                <div class="swiper-slide">
                    <div class="grid">
                        <img src="https://gw.alicdn.com/imgextra/i3/O1CN01MiunNU1oU0uEKRvja_!!6000000005227-2-tps-183-144.png_q90.jpg_.webp"
                            alt="">
                        <p>天猫好房</p>
                    </div>
                    <div class="grid">
                        <img src="https://gw.alicdn.com/imgextra/i4/O1CN01cxU47W1RnUaWavX3f_!!6000000002156-2-tps-183-144.png_q90.jpg_.webp"
                            alt="">
                        <p>天猫汽车</p>
                    </div>
                </div>
            </div>
            <!-- //如果需要分页器 -->
            <!-- <div class="swiper-pagination"></div> -->

            <!-- 如果需要导航按钮 -->
            <!-- <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div> -->

            <!-- //如果需要滚动条 -->
            <div class="swiper-scrollbar" id="banner-bar"></div>
        </div>
        <script>
            var mySwiper = new Swiper('#banner-swpier', {
                freeMode: true,
                slidesPerView: 'auto',
                scrollbar: {
                    el: '#banner-bar',
                },
            }); 
        </script>
    </section>
    <!-- 上面的这行代码一定要在下面的这行上面 -->

    <!-- 第三部分 四宫格 -->
    <div class="gongge">
        <div class="grid">
            <div class="gongge_hd">
                <h5>聚划算</h5>
                <p class="g1">品牌折扣</p>
            </div>
            <div class="gongge_left">
                <img src="https://gw.alicdn.com/tps/O1CN01f8Rrc81JDISvqwJKe_!!6000000000994-0-yinhe.jpg_140x140q90.jpg_.webp"
                    alt="">
            </div>
            <div class="gongge_right">
                <img src="https://gw.alicdn.com/tps/O1CN01Ysy4Oz2CKRQjgns6a_!!0-juitemmedia.jpg_180x180q90.jpg_.webp"
                    alt="">
            </div>
        </div>
        <div class="grid">
            <div class="gongge_hd">
                <h5>天天特卖</h5>
                <p class="g2">1元秒杀</p>
            </div>
            <div class="gongge_left">
                <img src="https://gw.alicdn.com/tps/O1CN01w95EhV1taUhHC1dk0_!!6000000005918-0-yinhe.jpg_140x140q90.jpg_.webp"
                    alt="">
            </div>
            <div class="gongge_right">
                <img src="https://gw.alicdn.com/tps/O1CN01PbuqFK1DX5swu0Yzz_!!6000000000225-0-yinhe.jpg_180x180q90.jpg_.webp"
                    alt="">
            </div>
        </div>
        <div class="grid">
            <div class="gongge_hd">
                <h5>有好货</h5>
                <p class="g3">好口碑</p>
            </div>
            <div class="gongge_left">
                <img src="https://gw.alicdn.com/tps/TB1duKrcGWs3KVjSZFxSuuWUXXa.jpg_140x140q90.jpg_.webp" alt="">
            </div>
            <div class="gongge_right">
                <img src="https://gw.alicdn.com/tps/O1CN01gpCHL620XTFPrV8Rr_!!6000000006859-0-yinhe.jpg_180x180q90.jpg_.webp"
                    alt="">
            </div>
        </div>
        <div class="grid">
            <div class="gongge_hd">
                <h5>每日好店</h5>
                <p class="g4">特色</p>
            </div>
            <div class="gongge_left">
                <img src="https://gw.alicdn.com/tps/O1CN014WxBnh1Z5XW6LTJ7g_!!6000000003143-0-yinhe.jpg_140x140q90.jpg_.webp"
                    alt="">
            </div>
            <div class="gongge_right">
                <img src="https://gw.alicdn.com/tps/TB1A413Rr2pK1RjSZFsSuuNlXXa.jpg_180x180q90.jpg_.webp" alt="">
            </div>
        </div>
        <div class="line1"></div>
        <div class="line2"></div>
    </div>

    <!-- 第四部分 瀑布流 -->

    <div class="waterfall">
        <div class="waterfall_left">
            <div class="swiper_wrap">
                <div class="swiper" id="waterfall-swpier">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide">
                            <img src="https://gw.alicdn.com/imgextra/i1/6000000002647/O1CN01IMIHmi1VQNAZq5QHA_!!6000000002647-0-lubanimage.jpg_q90.jpg_.webp"
                                alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="https://gw.alicdn.com/imgextra/i2/645479612/O1CN01O31Sua2KsLlUdnUxS_!!645479612-0-alimamacc.jpg_q90.jpg_.webp"
                                alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="https://gw.alicdn.com/imgextra/i3/1823107797/O1CN01o6zyba27T4u3MItoq_!!1823107797-0-alimamacc.jpg_q90.jpg_.webp"
                                alt="">
                        </div>
                        <div class="swiper-slide">
                            <img src="https://gw.alicdn.com/imgextra/i4/6000000007054/O1CN01mWwMOp21ymd8e90m3_!!6000000007054-0-lubanimage.jpg_q90.jpg_.webp"
                                alt="">
                        </div>
                    </div>
                    <div class="swiper-pagination" id="waterfall-swiper-pagination"></div>
                </div>
            </div>
            <script>
                new Swiper('#waterfall-swpier', {
                    loop: true,
                    autoplay: {
                        delay: 1000,
                        stopOnLastSlide: false,
                        disableOnInteraction: false,
                    },
                    pagination: {
                        el: '#waterfall-swiper-pagination',
                    },
                });
            </script>
            <style type="text/css">
                .swiper {
                    --swiper-theme-color: #ff6600;
                }
            </style>

            <div class="grid">
                <img src="https://gw.alicdn.com/bao/uploaded/i3/2902711774/O1CN01DIuSqe1OyXP9Nz288_!!0-item_pic.jpg_320x320q90.jpg_.webp"
                    alt="">
                <p class="pname">【双11加入购物车】YSL圣罗兰方管口红滋润缎光1966红棕赤豆沙157</p>
                <div class="info">
                    <span class="price">
                        <b>￥</b>
                        <i>350</i>
                    </span>
                    <span class="payed">1000+人已购买</span>
                </div>
            </div>
            <div class="grid">
                <img src="https://gw.alicdn.com/bao/uploaded/i3/664326059/O1CN01KYgnRx1ud4Y135Lop_!!0-item_pic.jpg_320x320q90.jpg_.webp"
                    alt="">
                <p class="pname">富士instax mini LiPlay evo拍立得相纸手机照片打印数码相机胶片</p>
                <div class="info">
                    <span class="price">
                        <b>￥</b>
                        <i>1,299</i>
                    </span>
                    <span class="payed">2000+人已购买</span>
                </div>
            </div>
            <div class="grid">
                <img src="https://gw.alicdn.com/bao/uploaded/i1/2820842454/O1CN012uGgkY1TzyjS8IjUR_!!0-item_pic.jpg_320x320q90.jpg_.webp"
                    alt="">
                <p class="pname">【双11抢先加购】植村秀小方瓶羽纱持妆粉底液控油遮瑕抗氧化持色</p>
                <div class="info">
                    <span class="price">
                        <b>￥</b>
                        <i>460</i>
                    </span>
                    <span class="payed">7000+人已购买</span>
                </div>
            </div>
            <div class="grid">
                <img src="https://gw.alicdn.com/bao/uploaded/i2/2468809135/O1CN01gVrB6R2HLsqQNwTbV_!!0-item_pic.jpg_320x320q90.jpg_.webp"
                    alt="">
                <p class="pname">【新品】欧缇丽淡斑小奶瓶美白精华液50ml/30ml提亮淡化暗沉</p>
                <div class="info">
                    <span class="price">
                        <b>￥</b>
                        <i>550</i>
                    </span>
                    <span class="payed">100+人已购买</span>
                </div>
            </div>
            <div class="grid">
                <img src="https://gw.alicdn.com/bao/uploaded/i2/2468809135/O1CN01gVrB6R2HLsqQNwTbV_!!0-item_pic.jpg_320x320q90.jpg_.webp"
                    alt="">
                <p class="pname">【新品】欧缇丽淡斑小奶瓶美白精华液50ml/30ml提亮淡化暗沉</p>
                <div class="info">
                    <span class="price">
                        <b>￥</b>
                        <i>550</i>
                    </span>
                    <span class="payed">100+人已购买</span>
                </div>
            </div>
            <div class="grid">
                <img src="https://gw.alicdn.com/bao/uploaded/i2/2468809135/O1CN01gVrB6R2HLsqQNwTbV_!!0-item_pic.jpg_320x320q90.jpg_.webp"
                    alt="">
                <p class="pname">【新品】欧缇丽淡斑小奶瓶美白精华液50ml/30ml提亮淡化暗沉</p>
                <div class="info">
                    <span class="price">
                        <b>￥</b>
                        <i>550</i>
                    </span>
                    <span class="payed">100+人已购买</span>
                </div>
            </div>
            <div class="grid">
                <img src="https://gw.alicdn.com/bao/uploaded/i2/2468809135/O1CN01gVrB6R2HLsqQNwTbV_!!0-item_pic.jpg_320x320q90.jpg_.webp"
                    alt="">
                <p class="pname">【新品】欧缇丽淡斑小奶瓶美白精华液50ml/30ml提亮淡化暗沉</p>
                <div class="info">
                    <span class="price">
                        <b>￥</b>
                        <i>550</i>
                    </span>
                    <span class="payed">100+人已购买</span>
                </div>
            </div>
            <div class="grid">
                <img src="https://gw.alicdn.com/bao/uploaded/i2/2468809135/O1CN01gVrB6R2HLsqQNwTbV_!!0-item_pic.jpg_320x320q90.jpg_.webp"
                    alt="">
                <p class="pname">【新品】欧缇丽淡斑小奶瓶美白精华液50ml/30ml提亮淡化暗沉</p>
                <div class="info">
                    <span class="price">
                        <b>￥</b>
                        <i>550</i>
                    </span>
                    <span class="payed">100+人已购买</span>
                </div>
            </div>
            <div class="grid">
                <img src="https://gw.alicdn.com/bao/uploaded/i2/2468809135/O1CN01gVrB6R2HLsqQNwTbV_!!0-item_pic.jpg_320x320q90.jpg_.webp"
                    alt="">
                <p class="pname">【新品】欧缇丽淡斑小奶瓶美白精华液50ml/30ml提亮淡化暗沉</p>
                <div class="info">
                    <span class="price">
                        <b>￥</b>
                        <i>550</i>
                    </span>
                    <span class="payed">100+人已购买</span>
                </div>
            </div>
            <div class="grid">
                <img src="https://gw.alicdn.com/bao/uploaded/i2/2468809135/O1CN01gVrB6R2HLsqQNwTbV_!!0-item_pic.jpg_320x320q90.jpg_.webp"
                    alt="">
                <p class="pname">【新品】欧缇丽淡斑小奶瓶美白精华液50ml/30ml提亮淡化暗沉</p>
                <div class="info">
                    <span class="price">
                        <b>￥</b>
                        <i>550</i>
                    </span>
                    <span class="payed">100+人已购买</span>
                </div>
            </div>
            <div class="grid">
                <img src="https://gw.alicdn.com/bao/uploaded/i2/2468809135/O1CN01gVrB6R2HLsqQNwTbV_!!0-item_pic.jpg_320x320q90.jpg_.webp"
                    alt="">
                <p class="pname">【新品】欧缇丽淡斑小奶瓶美白精华液50ml/30ml提亮淡化暗沉</p>
                <div class="info">
                    <span class="price">
                        <b>￥</b>
                        <i>550</i>
                    </span>
                    <span class="payed">100+人已购买</span>
                </div>
            </div>
            <div class="grid">
                <img src="https://gw.alicdn.com/bao/uploaded/i2/2468809135/O1CN01gVrB6R2HLsqQNwTbV_!!0-item_pic.jpg_320x320q90.jpg_.webp"
                    alt="">
                <p class="pname">【新品】欧缇丽淡斑小奶瓶美白精华液50ml/30ml提亮淡化暗沉</p>
                <div class="info">
                    <span class="price">
                        <b>￥</b>
                        <i>550</i>
                    </span>
                    <span class="payed">100+人已购买</span>
                </div>
            </div>
            <div class="grid">
                <img src="https://gw.alicdn.com/bao/uploaded/i2/2468809135/O1CN01gVrB6R2HLsqQNwTbV_!!0-item_pic.jpg_320x320q90.jpg_.webp"
                    alt="">
                <p class="pname">【新品】欧缇丽淡斑小奶瓶美白精华液50ml/30ml提亮淡化暗沉</p>
                <div class="info">
                    <span class="price">
                        <b>￥</b>
                        <i>550</i>
                    </span>
                    <span class="payed">100+人已购买</span>
                </div>
            </div>
        </div>
        <div class="waterfall_right">
            <div class="grid">
                <img src="https://gw.alicdn.com/bao/uploaded/i1/352469034/O1CN01Labqkt2GbcnIJ1uDM_!!0-item_pic.jpg_320x320q90.jpg_.webp"
                    alt="">
                <p class="pname">迪卡侬儿童泳衣宝宝泳装男女童连体儿童泳衣潜水服保暖隔热</p>
                <div class="info">
                    <span class="price">
                        <b>￥</b>
                        <i>99.9</i>
                    </span>
                    <span class="payed">57人已购买</span>
                </div>
            </div>
            <div class="grid">
                <img src="https://gw.alicdn.com/bao/uploaded/i2/3170729146/O1CN01r29n6G2HQvCaNlc4o_!!0-item_pic.jpg_320x320q90.jpg_.webp"
                    alt="">
                <p class="pname">【双11加购】MAC/魅可小滴管水漾粉底液精华保湿养肤滋润遮瑕</p>
                <div class="info">
                    <span class="price">
                        <b>￥</b>
                        <i>385</i>
                    </span>
                    <span class="payed">100+人已购买</span>
                </div>
            </div>
            <div class="grid">
                <img src="https://gw.alicdn.com/bao/uploaded/i4/842347059/O1CN01w15fEQ2214biMdu3a_!!0-item_pic.jpg_320x320q90.jpg_.webp"
                    alt="">
                <p class="pname">Fujifilm富士拍立得相机套餐 instax mini11一次成像迷你美颜学生</p>
                <div class="info">
                    <span class="price">
                        <b>￥</b>
                        <i>599</i>
                    </span>
                    <span class="payed">100+人已购买</span>
                </div>
            </div>
            <div class="grid">
                <img src="https://gw.alicdn.com/bao/uploaded/i1/2360209412/O1CN01iMG5fZ2JOkYNP0o36_!!0-item_pic.jpg_320x320q90.jpg_.webp"
                    alt="">
                <p class="pname">兰蔻菁纯气垫粉底液SPF50 自然持妆自带柔光 细腻服帖遮瑕养肤</p>
                <div class="info">
                    <span class="price">
                        <b>￥</b>
                        <i>680</i>
                    </span>
                    <span class="payed">100+人已购买</span>
                </div>
            </div>
            <div class="grid">
                <img src="https://gw.alicdn.com/bao/uploaded/i1/2360209412/O1CN01iMG5fZ2JOkYNP0o36_!!0-item_pic.jpg_320x320q90.jpg_.webp"
                    alt="">
                <p class="pname">兰蔻菁纯气垫粉底液SPF50 自然持妆自带柔光 细腻服帖遮瑕养肤</p>
                <div class="info">
                    <span class="price">
                        <b>￥</b>
                        <i>680</i>
                    </span>
                    <span class="payed">100+人已购买</span>
                </div>
            </div>
            <div class="grid">
                <img src="https://gw.alicdn.com/bao/uploaded/i1/2360209412/O1CN01iMG5fZ2JOkYNP0o36_!!0-item_pic.jpg_320x320q90.jpg_.webp"
                    alt="">
                <p class="pname">兰蔻菁纯气垫粉底液SPF50 自然持妆自带柔光 细腻服帖遮瑕养肤</p>
                <div class="info">
                    <span class="price">
                        <b>￥</b>
                        <i>680</i>
                    </span>
                    <span class="payed">100+人已购买</span>
                </div>
            </div>
            <div class="grid">
                <img src="https://gw.alicdn.com/bao/uploaded/i1/2360209412/O1CN01iMG5fZ2JOkYNP0o36_!!0-item_pic.jpg_320x320q90.jpg_.webp"
                    alt="">
                <p class="pname">兰蔻菁纯气垫粉底液SPF50 自然持妆自带柔光 细腻服帖遮瑕养肤</p>
                <div class="info">
                    <span class="price">
                        <b>￥</b>
                        <i>680</i>
                    </span>
                    <span class="payed">100+人已购买</span>
                </div>
            </div>
            <div class="grid">
                <img src="https://gw.alicdn.com/bao/uploaded/i1/2360209412/O1CN01iMG5fZ2JOkYNP0o36_!!0-item_pic.jpg_320x320q90.jpg_.webp"
                    alt="">
                <p class="pname">兰蔻菁纯气垫粉底液SPF50 自然持妆自带柔光 细腻服帖遮瑕养肤</p>
                <div class="info">
                    <span class="price">
                        <b>￥</b>
                        <i>680</i>
                    </span>
                    <span class="payed">100+人已购买</span>
                </div>
            </div>
            <div class="grid">
                <img src="https://gw.alicdn.com/bao/uploaded/i1/2360209412/O1CN01iMG5fZ2JOkYNP0o36_!!0-item_pic.jpg_320x320q90.jpg_.webp"
                    alt="">
                <p class="pname">兰蔻菁纯气垫粉底液SPF50 自然持妆自带柔光 细腻服帖遮瑕养肤</p>
                <div class="info">
                    <span class="price">
                        <b>￥</b>
                        <i>680</i>
                    </span>
                    <span class="payed">100+人已购买</span>
                </div>
            </div>
            <div class="grid">
                <img src="https://gw.alicdn.com/bao/uploaded/i1/2360209412/O1CN01iMG5fZ2JOkYNP0o36_!!0-item_pic.jpg_320x320q90.jpg_.webp"
                    alt="">
                <p class="pname">兰蔻菁纯气垫粉底液SPF50 自然持妆自带柔光 细腻服帖遮瑕养肤</p>
                <div class="info">
                    <span class="price">
                        <b>￥</b>
                        <i>680</i>
                    </span>
                    <span class="payed">100+人已购买</span>
                </div>
            </div>
            <div class="grid">
                <img src="https://gw.alicdn.com/bao/uploaded/i1/2360209412/O1CN01iMG5fZ2JOkYNP0o36_!!0-item_pic.jpg_320x320q90.jpg_.webp"
                    alt="">
                <p class="pname">兰蔻菁纯气垫粉底液SPF50 自然持妆自带柔光 细腻服帖遮瑕养肤</p>
                <div class="info">
                    <span class="price">
                        <b>￥</b>
                        <i>680</i>
                    </span>
                    <span class="payed">100+人已购买</span>
                </div>
            </div>
            <div class="grid">
                <img src="https://gw.alicdn.com/bao/uploaded/i1/2360209412/O1CN01iMG5fZ2JOkYNP0o36_!!0-item_pic.jpg_320x320q90.jpg_.webp"
                    alt="">
                <p class="pname">兰蔻菁纯气垫粉底液SPF50 自然持妆自带柔光 细腻服帖遮瑕养肤</p>
                <div class="info">
                    <span class="price">
                        <b>￥</b>
                        <i>680</i>
                    </span>
                    <span class="payed">100+人已购买</span>
                </div>
            </div>
            <div class="grid">
                <img src="https://gw.alicdn.com/bao/uploaded/i1/2360209412/O1CN01iMG5fZ2JOkYNP0o36_!!0-item_pic.jpg_320x320q90.jpg_.webp"
                    alt="">
                <p class="pname">兰蔻菁纯气垫粉底液SPF50 自然持妆自带柔光 细腻服帖遮瑕养肤</p>
                <div class="info">
                    <span class="price">
                        <b>￥</b>
                        <i>680</i>
                    </span>
                    <span class="payed">100+人已购买</span>
                </div>
            </div>
            <div class="grid">
                <img src="https://gw.alicdn.com/bao/uploaded/i1/2360209412/O1CN01iMG5fZ2JOkYNP0o36_!!0-item_pic.jpg_320x320q90.jpg_.webp"
                    alt="">
                <p class="pname">兰蔻菁纯气垫粉底液SPF50 自然持妆自带柔光 细腻服帖遮瑕养肤</p>
                <div class="info">
                    <span class="price">
                        <b>￥</b>
                        <i>680</i>
                    </span>
                    <span class="payed">100+人已购买</span>
                </div>
            </div>

        </div>
    </div>
    <script>
        !function (e, t) { var n = t.documentElement, d = e.devicePixelRatio || 1; function i() { var e = n.clientWidth / 3.75; n.style.fontSize = e + "px" } if (function e() { t.body ? t.body.style.fontSize = "16px" : t.addEventListener("DOMContentLoaded", e) }(), i(), e.addEventListener("resize", i), e.addEventListener("pageshow", function (e) { e.persisted && i() }), 2 <= d) { var o = t.createElement("body"), a = t.createElement("div"); a.style.border = ".5px solid transparent", o.appendChild(a), n.appendChild(o), 1 === a.offsetHeight && n.classList.add("hairlines"), n.removeChild(o) } }(window, document)
    </script>
</body>



</html>